<template>
  <div>
    <transition name="live2d">
        <live2d
        class="live2d"
        v-show="showLive2d"
        ref="aaa"
        @live2dItemEnter="live2dItemEnter"
        @live2dItemClick="live2dItemClick"
        :className="className"
        ModelWidth="230px"
        ModelHeight="230px"
        TipWidth="180px"
      ></live2d>
    </transition>

    <div class="Tip" v-show="!showLive2d" @click="toshowLive2d">
      <i class="live2d">点击唤醒人物</i>
    </div>
  </div>
</template>

<script>
import Bus from "../../bus"
export default {
  data() {
    return {
      className: [
        "live2dicon iconfont iconshouye",
        "live2dicon iconfont iconyifu",
        "live2dicon iconfont iconicon-test",
        "live2dicon iconfont icongithub",
        "live2dicon iconfont iconcuowu",
      ],
      showLive2d: true,
    };
  },
  mounted() {
    Bus.$on("BlogTitleTipAboutLive2d",msg=>{
      this.$refs.aaa.showMessage("你要看看"+msg+"吗?", 2000, 10000);
    })
    Bus.$on("live2dAboutGetMessage",msg=>{
      this.$refs.aaa.showMessage("你有一条消息说:"+msg, 2000, 10000);
    })
    Bus.$on("live2dAboutGetAdvice",msg=>{
      this.$refs.aaa.showMessage("你的任何留言或者建议都能带给本站更好的体验", 2000, 10000);

    }),
    Bus.$on("live2dAboutSendError",msg=>{
      this.$refs.aaa.showMessage("失败了。。。如果持续出现此情况请联系我鸭", 2000, 10000);

    }),
    Bus.$on("live2dAboutChooseWay",msg=>{      
      this.$refs.aaa.showMessage("选择"+msg+"类型的博客么?", 2000, 10000);

    })
    Bus.$on("live2dAboutVideo",msg=>{
      this.$refs.aaa.showMessage("看看"+msg.Way+"《"+msg.title+"》么?", 2000, 10000);

    })
    Bus.$on("live2dAboutNavigation",msg=>{
      this.$refs.aaa.showMessage(msg.title, 2000, 10000);
    })
  },
  methods: {
    toshowLive2d() {
      this.showLive2d = true;
    },
    live2dItemClick(index) {
      if (index === 4) {
        this.showLive2d = false;
      }
      if (index === 3) {
        window.open("https://github.com/ttzxh", "_blank");
      }
      if (index === 2) {
        this.$refs.aaa.loadOtherModel();
      }
      if (index === 1) {
        this.$refs.aaa.loadRandModel();
      }
      if (index === 0) {
        if (this.$route.path !== "/index") {
          this.$router.push("/index");
        }
      }
    },

    live2dItemEnter(index) {
      if (index === 4) {
        this.$refs.aaa.showMessage("要我离开吗", 2000, 1000);
      }
      if (index === 3) {
        this.$refs.aaa.showMessage("github欢迎您", 2000, 1000);
      }
      if (index === 2) {
        this.$refs.aaa.showMessage("还有其他角色哟", 2000, 1000);
      }
      if (index === 1) {
        this.$refs.aaa.showMessage("想换一件衣服看看吗", 2000, 1000);
      }
      if (index === 0) {
        this.$refs.aaa.showMessage("回首页看看吧", 2000, 1000);
      }
    },
  },
  beforeDestroy() {
    Bus.$off("BlogTitleTipAboutLive2d")
    Bus.$off("live2dAboutGetMessage")
    Bus.$off("live2dAboutGetAdvice")
    Bus.$off("live2dAboutGetAdvice")
    Bus.$off("live2dAboutSendError")
    Bus.$off("live2dAboutChooseWay")
    Bus.$off("live2dAboutVideo")
  },
};
</script>

<style lang="less" scoped>
.live2d-leave-active,
.live2d-enter-active {
  transition: opacity 0.5s;
}
.live2d-leave-to,
.live2d-enter {
  opacity: 0;
}
.live2d{
  position: absolute;
  z-index: 9999;
  opacity: 0.9;
}
.Tip {
  padding: 10px 5px 5px;

  position: absolute;
  width: 50px;
  height: 100px;
  bottom: 20px;
  right: 40px;
  background: #e5e5e5;
  border-radius: 5px;
  animation: move 0.5s linear infinite;
}
@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0);
  }
}
@font-face {
  font-family: "live2d";
  src: url("../../assets/font/1.woff");
  src: url("../../assets/font/1.woff") format("woff");
}
i {
  font-size: 25px;
  color: #000;
  font-family: "live2d";
}

span[data-v-5581a957]{
  .iconfont{
  color: red !important;

  }
}

</style>  